<!DOCTYPE html>
<html lang="zh-cn">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title></title>
        <link rel="stylesheet" type="text/css" href="./style.css">
		<script src="../src/vue.js"></script>
		<script type="text/x-template" id="modal-temp">
			<div class="modal-example">
				<!-- <div class="mask"></div> -->
	        	<div class="modal">
					<div class="modal-header">
						<slot name='header'>
							<h4>{{title}}</h4>
						</slot>

					</div>
					<div class="modal-content">
						<div>
							<slot name="content">在这里添加内容</slot>
						</div>
					</div>
					<div class="modal-footer">
						<slot name="footer">
							<input class="btn" @click="okHandle"
							type="button" :value="okValue"  
							/>
							<input  @click="cancelHandle"
							class="btn" type="button" :value="cancelValue" />
						</slot>
					</div>
	        	</div>
	      	</div>
		</script>
	</head>

	<body>
		
      	<div id="app">
      		<p :style="{background: a}">变颜色</p>
      		<modal @ok-click="changeColor" title="温馨提示" cancel-value='返回'>
      			<h1 slot='header'>很大的标题</h1>
      			<template slot="content">
      				<p>定制的内容</p>
      				<table>
      					<th>
      						<td>hello</td>
      						<td>hello</td>
      						<td>hello</td>
      						<td>hello</td>
      					</th>
      				</table>
      			</template>

      		</modal>
      		<!-- <modal @ok-click="changeColor2" title="温馨提示" cancel-value='返回'>
      			<template slot="content">
      				<p>定制的内容</p>
      				<form>
      					<input type="" name="">
      				</form>
      			</template>
      		
      		</modal> -->
      	</div>
		<script>
			/*
				1. 定制数据
					title
					okValue
					cancelValue
				2. 关心内部事件
					点击了ok
					点击了cancel
				3. 定制结构
					header
					content
					footer
			*/
			Vue.component('Modal',{
				props:{
					title:{
						type: String,
						default: '默认标题'
					},
					okValue:{
						type: String,
						default: '确定'
					},
					cancelValue:{
						type: String,
						default: '取消'
					}
				},
				template: '#modal-temp',
				methods: {
					okHandle () {
						this.$emit('ok-click')
					},
					cancelHandle () {
						this.$emit('cancel-click')
					}
				}
			})
			new Vue({
				el:'#app',
				data:{
					a: 'blue'
				},
				methods: {
					changeColor (){
						this.a = 'red'
					},
					changeColor2 (){
						this.a = 'yellow'
					}
				}
			})
		</script>
	</body>
</html>
